<template>
  <el-row :gutter="20">
    <el-col :span="22" style="margin: 10px auto;">
      <Fill :rule="rule" :option="option" :taskId="taskId" :formId="formId" :releaseVersion="releaseVersion" v-if="drawer" @send-data="updateData" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { FormApi } from '@/api/system/form'

import Fill from './Fill.vue'
import { useRouter } from 'vue-router'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const rule = ref()
const option = ref()
const drawer = ref(false)
const taskId = ref()
const formId = ref()
const releaseVersion = ref()

/** 初始化 **/
onMounted(() => {
  getFormData()
})

const getFormData = async () => {
  const route = useRoute()
  taskId.value = route.query.id
  const data = await FormApi.getFormList(parseInt(route.query.formId))
  if (data && data.length == 1) {
    rule.value = data[0].dfFields
    option.value = data[0].dfConf
    formId.value = data[0].id
    releaseVersion.value = data[0].dfReleaseVersion
    drawer.value = true
  } else {
    rule.value = ''
    option.value = ''
  }
}

const updateData = async (data) => {
  message.success(t(data))
}
</script>
